<template>
  <div class="container">
      <div style="padding-top: 20px;">
          <el-breadcrumb separator="/" class="breadcrumb">
              <el-breadcrumb-item>
                  <router-link to="/user/location">党建地点</router-link>
              </el-breadcrumb-item>
              <el-breadcrumb-item>党建地点详细信息</el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <!-- Outer Card wrapping the content -->
      <el-card class="main-card">
          <div class="content">
              <div class="location-detail">
                  <!-- Location image -->
                  <el-card class="image-card">
                      <img
                          v-if="locationDetails.photo"
                          :src="locationDetails.photo"
                          alt="Location Image"
                          class="location-image"
                      />
                  </el-card>

                  <div class="location-info">
                      <h2>{{ locationDetails.name }}</h2>
                      <p><strong>预约人数:</strong> {{ locationDetails.balance }}</p>
                      <p><strong>类型:</strong> {{ locationDetails.type }}</p>
                  </div>

                  <div class="location-description">
                      <h3>详细信息</h3>
                      <p>{{ locationDetails.content }}</p>
                  </div>
              </div>

              <!-- 推荐位置 -->
              <div class="recommendations">
                  <h3>系统推荐</h3>
                  <el-row :gutter="20" class="recommendation-list">
                      <el-col
                          v-for="location in recommendedLocations"
                          :key="location.id"
                          :span="24"
                          class="recommendation-item"
                      >
                          <router-link
                              :to="{ name: 'LocationDetail', params: { locationId: location.id, locationName: location.name } }"
                              class="recommended-content"
                          >
                              <img
                                  :src="location.photo"
                                  alt="推荐地点"
                                  class="recommendation-image"
                              />
                              <div class="recommendation-name">{{ location.name }}</div>
                          </router-link>
                      </el-col>
                  </el-row>
              </div>
          </div>
      </el-card>
  </div>
</template>

<script>
import { selectByNameService, LocationListService } from '@/api/location.js';

export default {
  data() {
      return {
          locationId: this.$route.params.locationId,
          locationName: this.$route.params.locationName,
          locationDetails: {},
          allLocations: [],
          recommendedLocations: [],
      };
  },
  created() {
      this.fetchLocationDetails(); // Fetch the location details based on name
      this.fetchAllLocations(); // Fetch all locations
  },
  methods: {
      async fetchLocationDetails() {
          try {
              const response = await selectByNameService(this.locationName);
              this.locationDetails = response.data[0] || {};
              console.log('Location Details:', this.locationDetails);
          } catch (error) {
              console.error('Error fetching location details:', error);
          }
      },
      async fetchAllLocations() {
          try {
              const response = await LocationListService({ page: 1, size: 10 });
              this.allLocations = response.data.list; // All locations fetched
              this.getRecommendedLocations(); // Get recommended locations
              console.log('All Locations:', this.allLocations);
          } catch (error) {
              console.error('Error fetching all locations:', error);
          }
      },
      getRecommendedLocations() {
          const sortedLocations = this.allLocations.sort((a, b) => b.number - a.number); // Sort locations
          this.recommendedLocations = sortedLocations.slice(0, 4); // Get the top 4 recommended locations
      },
  },
};
</script>

<style scoped>
.container {
  width: 70%; /* 界面宽度占据70% */
  margin: 0 auto; /* 居中显示 */
}

.breadcrumb {
  margin-bottom: 20px; /* 左上角面包屑导航的底部间距 */
}

.main-card {
  padding: 20px; /* 卡片内边距 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  border-radius: 8px; /* 边缘圆角 */
}

.content {
  display: flex;
  justify-content: space-between;
}

.location-detail {
  flex: 1; /* 主体内容区域 */
  margin-right: 20px; /* 主体内容区域与推荐卡片之间的间距 */
}

.image-card {
  margin-bottom: 20px; /* 位置图片的底部间距 */
}

.location-image {
  width: 100%; /* 图片宽度自适应 */
  height: auto; /* 高度自适应 */
}

.location-info {
  margin-top: 10px;
  margin-bottom: 20px; /* 位置信息区域的上下间距 */
}

.location-description {
  margin-top: 20px; /* 详细信息区域的顶部间距 */
}

.recommendations {
  width: 300px; /* 推荐区域宽度 */
}

.recommendation-list {
  display: flex;
  flex-direction: column; /* 纵向排列推荐卡片 */
}

.recommendation-item {
  margin-bottom: 20px; /* 推荐项目之间的底部间距 */
}

.recommended-content {
  display: flex; /* 使图片和名称在一行 */
  align-items: center; /* 垂直居中内容 */
  cursor: pointer; /* 鼠标悬停指针样式 */
  padding: 10px; /* 内边距 */
  transition: background-color 0.3s, box-shadow 0.3s; /* 过渡效果 */
  border-radius: 5px; /* 圆角 */
}

.recommended-content:hover {
  background-color: #f5f5f5; /* 悬浮时背景色变化 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 悬浮时阴影效果 */
}

.recommendation-image {
  width: 100px; /* 推荐卡片图片固定宽度 */
  height: 50px; /* 图片高度 */
  object-fit: cover; /* 保持宽高比，裁剪多余部分 */
  margin-right: 10px; /* 图片与文字之间的间距 */
}

.recommendation-name {
  text-align: left; /* 推荐名称左对齐 */
  margin: 0; /* 去掉默认margin */
}
</style>
